<template>
	<div class="category">
		<!-- 顶部搜索 -->
		<div class="suosou" v-if="goodData">
			<router-link :to="{ name: 'search' }">
				<van-search v-model="value" disabled shape="round" background="#fff" placeholder="请输入搜索关键词" />

			</router-link>
		</div>
		<!-- 顶部搜索 End-->
		<!-- 顶部二分类 -->
		<div class="fenle" v-if="goodData">
			<div class="items">
				<!-- todo肯能出现 -->
				<div class="item" v-for="item, index in goodData" :key="item.id" @click="dianji(index)">
					{{ item.Name }}
				</div>
			</div>
		</div>
		<!-- 顶部二分类 End-->
		<!-- 车变懒 -->
		<div class="chebian" v-if="goodData">
			<van-sidebar v-model="activeKey">
				<van-sidebar-item v-for="item, index in goodData[cindex].Child" @click="onChange(index)" :key="item.id"
					:title="item.Name" />
			</van-sidebar>

		</div>
		<!-- 车变懒 End-->
		<!-- 商品 -->
		<div class="goods" v-if="goodsData">
			<div class="items">
				<div class="item" v-for="item in goodsData" :key="item.ProductDefaultImage">
					<router-link :to="{ name: 'detail', params: { id: item.ProductId } }">
						<div class="item1">
							<div class="img"><img :src="item.ProductDefaultImage" alt=""></div>
							<div class="text">
								<div class="tile">{{ item.ProductName }}</div>
								<div class="price">
									<span>￥{{ item.OriginalPrice }}</span>
									<span>
										<svg t="1669216864684" class="icon" viewBox="0 0 1024 1024" version="1.1"
											xmlns="http://www.w3.org/2000/svg" p-id="2714" width="20" height="20">
											<path
												d="M346.112 806.912q19.456 0 36.864 7.168t30.208 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.208 20.48-36.864 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 37.888-7.168zM772.096 808.96q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM944.128 227.328q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-13.312 37.888-22.016 62.976-23.552 68.096-18.944 53.248q-13.312 40.96-33.28 56.832t-49.664 15.872l-35.84 0-65.536 0-86.016 0-96.256 0-253.952 0 14.336 92.16 517.12 0q49.152 0 49.152 41.984 0 20.48-9.728 35.328t-38.4 14.848l-49.152 0-94.208 0-118.784 0-119.808 0-99.328 0-55.296 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-13.312l21.504 0 21.504 0 25.6 0 34.816 0q20.48 0 32.768 6.144t19.456 15.36 10.24 19.456 5.12 17.408q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0zM867.328 194.56l-374.784 0 135.168-135.168q23.552-23.552 51.712-24.064t51.712 23.04z"
												p-id="2715" fill="#d81e06"></path>
										</svg>
									</span>
								</div>
							</div>
						</div>


					</router-link>
				</div>
			</div>
		</div>
		<!-- 商品 End-->

	</div>
</template>
<script>

export default {
	data() {
		return {
			value: '',
			activeKey: 0,
			cindex: 0,
			sindex: 0,
			goodData: null,
			goodsData: [],
		};
	},
	created() {

		this.$api.sentFenl().then(res => {
			// console.log(res, '数据data');
			this.goodData = res.Data
			console.log(this.goodData);
		})
		this.getGoods()
	},
	methods: {
		dianji(index) {
			console.log('这是哼', index);
			this.cindex = index
			this.getGoods()
		},
		onChange(index) {
			console.log('这是数', index);
			this.sindex = index
			this.getGoods()
		},
		getGoods() {
			this.$api.zhenEnx().then(res => {
				// console.log(res,'社死');
				if (res.code == 0) {
					console.log(this.goodsData);
					this.goodsData = res.data.data.Data
					console.log(res, '社死123');

				}

			})
		}
	},
};
</script>
<style lang="less" scoped>
.category {

	.suosou {
		width: 100%;
		position: fixed;
		top: 0%;
	}

	.fenle {
		position: fixed;
		top: 6%;

		.items {
			display: flex;
			overflow-x: auto;

			flex-wrap: nowrap !important;
			flex: 0 0;

			.item {

				margin: 10px;
				width: 56px;
				height: 20px;
				line-height: 20px;
				color: #1f1f1f;
				font-size: 16px;
				height: 39px;
				border: 0 solid transparent;
			}
		}

	}

	.chebian {
		top: 10%;
		width: 20%;
		position: fixed;
		left: 0;
		height: 100%;

		.van-sidebar {
			height: 100%;
			overflow-y: auto;

		}

	}

	//其他

	.goods {
		position: fixed;
		left: 18%;
		top: 11%;
		overflow-y: auto;
		height: 100%;

		.items {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10px;

				a {
					width: 100%;
					display: block;

					.item1 {
						display: flex;
						justify-content: flex-start;
						padding: 10px;
						.img {
							width: 90px;
							height: 90px;

							img {
								width: 100%;
							}
						}

						.text {
							width: 80%;
							margin-left: 10px;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;

							.tile {
								font-size: 16px;
								text-align: left;
							}

							.price {
								color: red;
								margin-top: 10px;
								width: 100%;
								display: flex;
								justify-content: space-between;
							}
						}
					}

				}

			}
		}
	}

	//end
}
</style>

